<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>订单支付状态</title>
  <script>
    if (!localStorage.getItem('payDueTimes') || localStorage.getItem('payDueTimes') - Date.now() < 60 * 30) {
      top.document.getElementById('ifr').setAttribute('src', 'hashOrder.html')
    }
  </script>

  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
</head>
<style>
  [v-cloak] {
    display: none;
  }

  .dd_meassage {
    width: 1360px;
    background-color: #FFF;
    margin: 30px auto 0 auto;
  }

  .dd_meassage_top {
    width: 100%;
    height: 362px;
  }

  .dd_meassage_ms {
    width: 700px;
    margin: 100px 441px 0px;
    height: 200px;
    display: inline-block;
  }

  .dd_meassage_ms .copy {
    display: inline-block;
    margin-left: 20px;
    padding-left: 26px;
    font-size: 16px;
    color: #49A9EE;
    cursor: pointer;
    background: url(./images/ico_copy.png) no-repeat left center;
    background-size: 16px auto
  }

  .dd_meassage_tit {
    width: 100px;
    height: 48px;
    font-size: 20px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 48px;
  }

  .dd_meassage_sl {
    width: 570px;
    height: 30px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 30px;
  }

  .dd_meassage_zfje {
    margin-top: 20px;
  }

  .dd_meassage_zfje label {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #0E9CF2;
    line-height: 30px;
    margin-right: 10px;
  }

  .dd_meassage_cg {
    width: 100%;
    height: 30px;
    font-size: 18px;
    float: left;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
  }

  .dd_meassage_cg img {
    float: left;
    width: 30px;
    height: 30px;
  }

  .dd_meassage_cg label {
    margin-left: 10px;
  }

  .status_smz {
    display: none;
  }

  .status_smz.on {
    display: block;
  }
</style>

<body>
  <div class="dd_meassage" id="app" file-name="pay_status">
    <div class="dd_meassage_top">
      <div class="dd_meassage_ms">
        <div class="dd_meassage_tit">订单信息</div>
        <div class="dd_meassage_sl">算力订单：<label ref="copyText">{{hashOrder}}</label><a class="copy" @click="clickCopy">复制</a></div>
        <div class="dd_meassage_sl">创建日期：<label>{{G.getFormatTime(createTime)}}</label></div>
        <div class="dd_meassage_sl">购买算力：<label style="margin-right: 5px;">{{G.toThousandsRound(buyHashTotal)}}</label>TH</div>
        <div class="dd_meassage_sl dd_meassage_zfje">支付金额：<label>{{G.toThousandsRound(paySum)}}</label><label>TAIC</label></div>
      </div>

    </div>
    <div style="width: 100%; background: #eee; height: 2px; float: left;"></div>
    <div class="dd_meassage_top">
      <div class="dd_meassage_ms status_smz" :class="{on: isShowStatus}">
        <div class="dd_meassage_cg" v-if="isPayOk"><img src="images/payok.png"><label>支付成功</label></div>
        <div class="dd_meassage_cg" v-else><img src="images/payno.png"><label>支付失败</label></div>
      </div>
    </div>
  </div>
</body>
<script src="js/iview.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      hashOrder: '获取中...',
      createTime: 0,
      buyHashTotal: 0,
      paySum: 0,
      isShowStatus: false,
      isPayOk: true,
    },
    methods: {
      clickCopy(el) {
        this.oCopy(this.$refs.copyText);
      },

      oCopy(ele) {
        var range = document.createRange();
        range.selectNode(ele);
        var selection = window.getSelection();
        selection.rangeCount > 0 && selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
      },
    },

    mounted() {
      setTimeout(() => {
        this.isShowStatus = true
      }, 500)

      var order = JSON.parse(localStorage.getItem('order_info'));
      this.isPayOk = localStorage.getItem('payStatus') == '1'
      if (order) {
        this.hashOrder = order.orderId
        this.createTime = G.getFormatTime(order.createTime)
        this.buyHashTotal = G.toThousandsRound(order.orderTh)
        this.paySum = G.toThousandsRound(order.total)
      }
    },
  })
</script>

</html>